<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const classCountChart = ref(null);
const difficultyChart = ref(null);
const completionChart = ref(null);
const statusChart = ref(null);

const classData = ['班级A', '班级B', '班级C', '班级D', '班级E'];
const classCounts = [120, 200, 150, 80, 70];
const difficultyData = [
  { value: 40, name: '简单' },
  { value: 30, name: '中等' },
  { value: 30, name: '困难' },
];
const completionData = [80, 90, 70, 60, 100];

const statusData = {
  未开始: [5, 10, 8, 3, 2],
  进行中: [15, 20, 12, 8, 5],
  已提交: [30, 25, 20, 15, 10],
  已检查: [20, 15, 10, 5, 3],
  已完成: [50, 40, 30, 20, 15],
  不会做: [5, 3, 2, 1, 0],
};

const renderClassCountChart = () => {
  const myChart = echarts.init(classCountChart.value);
  const option = {
    title: {
      text: '每个班级的人数统计',
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      data: classData,
    },
    yAxis: {
      type: 'value',
    },
    series: [{
      name: '人数',
      type: 'bar',
      data: classCounts,
      itemStyle: {
        color: '#409EFF',
      },
    }],
  };
  myChart.setOption(option);
};

const renderDifficultyChart = () => {
  const myChart = echarts.init(difficultyChart.value);
  const option = {
    title: {
      text: '任务难易程度比例',
    },
    tooltip: {
      trigger: 'item',
    },
    series: [{
      name: '难易程度',
      type: 'pie',
      radius: '50%',
      data: difficultyData,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    }],
  };
  myChart.setOption(option);
};

const renderCompletionChart = () => {
  const myChart = echarts.init(completionChart.value);
  const option = {
    title: {
      text: '当天班级任务完成情况',
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      data: classData,
    },
    yAxis: {
      type: 'value',
    },
    series: [{
      name: '完成情况',
      type: 'line',
      data: completionData,
      itemStyle: {
        color: '#67C23A',
      },
      smooth: true,
    }],
  };
  myChart.setOption(option);
};

const renderStatusChart = () => {
  const myChart = echarts.init(statusChart.value);
  const option = {
    title: {
      text: '各班级作业状态分布',
      subtext: '状态数量',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: Object.keys(statusData),
      orient: 'vertical',
      left: 'left',
    },
    xAxis: {
      type: 'category',
      data: classData,
    },
    yAxis: {
      type: 'value',
    },
    series: Object.keys(statusData).map((status) => ({
      name: status,
      type: 'line',
      data: statusData[status],
      smooth: true,
    })),
  };
  myChart.setOption(option);
};

onMounted(() => {
  renderClassCountChart();
  renderDifficultyChart();
  renderCompletionChart();
  renderStatusChart();
});
</script>

<template>
  <div class="home-view">
    <div class="charts-container">
      <div class="chart-card">
        <div class="chart" ref="classCountChart"></div>
      </div>
      <div class="chart-card">
        <div class="chart" ref="difficultyChart"></div>
      </div>
      <div class="chart-card">
        <div class="chart" ref="completionChart"></div>
      </div>
    </div>
    <div class="status-chart-container">
      <div class="chart-card wide">
        <div class="chart" ref="statusChart"></div>
      </div>
    </div>
  </div>
</template>

<style>
.home-view {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-title {
  color: #303133;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}

.section-title {
  color: #303133;
  margin: 32px 0 24px;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.chart-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 16px;
  transition: transform 0.3s ease;
}

.chart-card:hover {
  transform: translateY(-5px);
}

.chart-card.wide {
  grid-column: 1 / -1;
}

.chart {
  width: 100%;
  height: 350px;
}

@media (max-width: 768px) {
  .home-view {
    padding: 16px;
  }

  .charts-container {
    grid-template-columns: 1fr;
  }

  .chart {
    height: 300px;
  }

  .page-title {
    font-size: 20px;
  }

  .section-title {
    font-size: 18px;
  }
}
</style>
